<template>
    <div class="panel panel-default panel-search">
        <el-container>
            <el-aside width="22%" v-show="showSort">
                <v-sort-table ref="sortTable" :page="page" :header="header" :doSortFun="doSortFun">
                </v-sort-table>
            </el-aside>
            <el-main>
                <el-form :inline="true" label-width="85px" label-position="left">
                    <el-button @click="btnSort" v-if="table.tableId" class="btn_leftright" plain> 排序</el-button>

                    <el-form-item label="应用系统" prop="sysAppId">
                        <sys-app-select @change="search" v-model="page.query.param.sysAppId"
                                        :clearable="true"></sys-app-select>
                    </el-form-item>

                    <el-form-item label="元数据类型" prop="metadataType">
                        <el-select @change="search" v-model="page.query.param.metadataType" :clearable="true">
                            <el-option v-for="t in $dict.store.METADATA_TYPE" :key="t[0]" :value="t[0]" :label="t[1]">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="元数据名称" prop="metadataName">
                        <el-input placeholder="元数据名称" v-model="page.query.param.metadataName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" v-keycode="'ENTER'">查询</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>

                    <el-button @click="create" type="primary" class="btn_right" plain>新增</el-button>
                    <el-button @click="exportDictTables" class="btn_right" plain> 导出</el-button>
                    <el-button @click="importDictTable" class="btn_right" plain>导入</el-button>
                    <el-button @click="dbImportTables" class="btn_right" plain>根据DB全量刷新</el-button>
                    <el-button @click="dbImportTablesAsync" class="btn_right" plain>根据DB异步刷新</el-button>
                    <el-button @click="dbImportTablesInc" class="btn_right" plain>根据DB增量刷新</el-button>

                </el-form>
                <!--:dblclick="edit"-->
                <v-table :pageSize="10" :selection="false" :multi="true" ref="table" :page="page" :table-minheight="200"
                         :click="clickTableRow" @dataloaded="onDataloaded">
                    <el-table-column prop="seq" label="序号" width="50">
                        <template slot-scope="scope"><span>{{ scope.$index + 1 }} </span></template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop="metadataOrder" label="排序" width="70">
                        <template slot-scope="{row}">
                            <span style="color:mediumvioletred">{{ row.metadataOrder||row.tableId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop="tableId" label="元数据标识" width="110">

                    </el-table-column>

                    <!--                    <el-table-column width="120" label="元数据操作">-->

                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button type="text" title="建表" @click="makeDbTable(scope.row)">-->
                    <!--                                建表-->
                    <!--                            </el-button>-->
                    <!--                            <el-button type="text" @click="dropDbTable(scope.row)" title="删表">-->
                    <!--                                <span style="color:red">删表</span>-->
                    <!--                            </el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->

                    <el-table-column :sortable="true" prop="tableComment" label="中文名称" width="220">
                        <!--<template slot-scope="{row}">-->
                        <!--<span style="color:blue">{{row.metadataAlias}}</span>-->
                        <!--</template>-->
                        <template slot-scope="scope">
                            <a class="link-name"
                               href="javascript:;"
                               :title="scope.row.tableComment"
                               @click="edit(scope.row)">{{ scope.row.tableComment || scope.row.tableName }}
                            </a>
                        </template>
                    </el-table-column>

                    <el-table-column :sortable="true" prop="tableName" label="元数据名称" width="220">
                        <template slot-scope="{row}">
                            <span style="color:mediumvioletred">{{ row.tableName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop="tableName" label="应用系统名称" width="111">
                        <template slot-scope="{row}">
                            <span style="color:mediumvioletred">{{ row.sysAppId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="元数据类型" width="100">
                        <template slot-scope="{row}">
                            {{ $dict.getText(row.type, $dict.store.METADATA_TYPE) }}
                        </template>
                    </el-table-column>
                    <!--                    <el-table-column :sortable="true" prop="metadataAutocreate" label="允许建表" width="100">-->
                    <!--                        <template slot-scope="{row}">-->
                    <!--                            {{ row.metadataAutocreate ? '是' : '否' }}-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->

                    <el-table-column prop="dbName" label="数据库" width="160"></el-table-column>
                    <el-table-column prop="sysName" label="描述"></el-table-column>


                    <el-table-column width="240" label="操作" :fixed="'right'">

                        <template slot-scope="scope">
                            <el-button type="text" title="编辑" @click="edit(scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>

                            <el-button type="text" title="拷贝" @click="copyMaster(scope.row)">
                                拷贝
                            </el-button>
                            <el-button type="priamry" title="生成页面" plain @click="makeWebPage(scope.row)">
                                生成页面
                            </el-button>
                            <el-button type="text" @click="exportDictTable(scope.row)" title="导出">
                                导出
                            </el-button>
                            <el-button type="text" @click="del(scope.row,scope.$index)" title="删除">
                                <span style="color:red"><i class="el-icon-delete red"></i></span>
                            </el-button>
                        </template>
                    </el-table-column>

                </v-table>
            </el-main>
        </el-container>
        <v-dialog ref="formDiag" title="信息编辑" :width="'650px'">
            <dict-panel @saved="onFormSaved"></dict-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')">保存</el-button>
                <el-button type="default" @click="()=>{$refs.formDiag.hide()}">取消</el-button>
            </div>
        </v-dialog>
        <v-dialog ref="uploadFormDiag" title="上传元数据字典文件" :width="'650px'">
            <upload-panel :postSuccess="search"></upload-panel>
            <div slot="footer">
                <!--<el-button type="primary" @click="$refs.uploadFormDiag.dispatch('submit')">保存</el-button>-->
                <el-button type="default" @click="()=>{$refs.uploadFormDiag.hide()}">关闭</el-button>
            </div>
        </v-dialog>

    </div>
</template>
<style lang="less" scoped>

.btn_right {
    float: right;
    margin-right: 5px
}

</style>

<script>
import SysAppSelect from '@/components/widgets/metadata/SysAppSelect.vue';
import DictPanel from './DictForm.vue'
import UploadPanel from './UploadForm.vue'

export default {
    components: {UploadPanel, DictPanel, SysAppSelect},
    props: {
        value: {
            type: Object,
            required: true
        }
    },
    computed: {
        table: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            }
        }

    },

    watch: {},
    data() {
        return {
            doSortMetadataDict: this.$api.platform.metadata.MetadataTableService.doSortMetadataDict,
            showSort: false,
            header: [
                {
                    label: 'ID',
                    prop: 'metadataId'
                },
                {
                    label: '排序',
                    prop: 'metadataOrder'
                },

                {
                    label: '中文名称',
                    prop: 'metadataAlias'
                },
                {
                    label: '英文名称',
                    prop: 'metadataName'
                }
            ],

            page: {
                query: {
                    orderBys: 'tableId|desc',
                    param: {
                        sysAppId: null,
                        metadataType: 1,
                        isDeleted: false
                    }
                },
                getData: this.$api.metadata.MetadataTableProp.query
            }
        }
    },
    methods: {
        exportDictTables() {
            let rows = this.$refs.table.getSelectedRows().map(row => row.tableId)
            let msgs = this.$refs.table.getSelectedRows().map(row => row.metadataName)
            if (rows.length === 0) {
                this.$message('请选择表!')
                return
            }
            // let f1 = () => this.$api.metadata.MetadataTableProp.export(rows.join()).then(rsp => {
            //
            // })
            let f = () => this.$api.metadata.MetadataTableProp.export({limit: 100}).then(rsp => {

            })
            this.$myconfirm(`确定要导出选中的表字典吗?`, f)
        },

        dbImportTablesInc() {
            let f = () => this.$api.platform.metadata.MetadataTableService.dbImportTablesInc(this.page.query.param.subsysId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code === 0) {
                    this.search();

                }
            })

            this.$myconfirm('确定要从DB刷新多表的结构吗?', f)
        },
        dbImportTablesAsync() {
            let f = () => this.$api.platform.metadata.MetadataTableService.dbImportTablesAsync(this.page.query.param.subsysId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code === 0) {
                    this.search();

                }
            })

            this.$myconfirm('确定要从DB刷新多表的结构吗?', f)
        },
        dbImportTables() {
            let f = () => this.$api.platform.metadata.MetadataTableService.dbImportTables(this.page.query.param.subsysId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code === 0) {
                    this.search();

                }
            })

            this.$myconfirm('确定要从DB刷新多表的结构吗?', f)
        },
        btnSort() {
            this.showSort = !this.showSort
            if (this.showSort) {
                this.$refs.table.calQueryStartLimt(this.page.query)
                this.$refs.sortTable.show()
            }
        },
        doSortFun(sortedData) {

            let ids = sortedData.map(x => x[this.header[0].prop]).join() // debugger
            let params = {
                subsysId: this.page.query.param.subsysId,
                ids: ids
            }
            this.doSortMetadataDict(params).then(
                rsp => {
                    this.$msgJsonResult(rsp)
                    this.search()
                })

        },

        makeWebPage(row) {
            let params = {
                param: {
                    metadataId: row.metadataId
                }
            }
            this.$api.platform.metadata.MetadataTableService.makeWebPage(params).then(rsp => {
                this.$msgJsonResult(rsp);

            });
        },

        clickTableRow(row) {
            // Object.assign(this.value, row)
            this.table = row
        },

        onFormSaved(rsp) {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            this.search();
        },

        search() {
            this.getSearchParams() // this.$refs.table.pageNum = 1;
            this.$refs.table.load();
        },
        cancel() {
            this.dateRangeType = null;
            this.dateRange = [];
            this.page.query = {
                orderBys: 'metadataOrder|asc',
                param: {
                    subsysId: this.page.query.param.subsysId,
                    metadataType: this.page.query.param.metadataType
                }
            };

            this.search();
        },
        onDataloaded(rsp) {

            if (rsp.data && rsp.data.list.length > 0) {
                this.table = rsp.data.list[0]
            }

        },
        getSearchParams() {
            return this.page.query;
        },

        dropDbTable(row) {
            if (row) {
                let params = _.cloneDeep(this.page.query)
                params.param.metadataId = row.metadataId
                this.$confirm('确定要删\'' + row.metadataAlias + '表\'吗?', '提示', {type: 'warning'}).then(() => {

                    this.$api.platform.metadata.MetadataTableService.dropDbTable(params).then(rsp => {
                        this.$msgJsonResult(rsp)

                    });
                });
            }
        },

        makeDbTable(row) {

            if (row) {
                let params = _.cloneDeep(this.page.query)
                params.param.metadataId = row.metadataId
                this.$confirm('确定要建\'' + row.metadataAlias + '表\'吗?', '提示', {type: 'warning'}).then(() => {

                    this.$api.platform.metadata.MetadataTableService.makeDbTable(params).then(rsp => {
                        this.$msgJsonResult(rsp)

                    });
                });
            }
        },

        copyMaster(row) {

            if (row) {
                //let params = Object.assign({}, this.page.query)
                let params = _.cloneDeep(this.page.query)
                params.param.metadataId = row.metadataId

                this.$confirm('确定要拷贝\'' + row.metadataAlias + '表\'吗?', '提示', {type: 'warning'}).then(() => {
                    this.$api.platform.metadata.MetadataTableService.copyMaster(params).then(rsp => {
                        this.$msgJsonResult(rsp);
                        if (rsp.code == 0) {
                            //params.param.metadataId = null
                            this.page.query.param.metadataId = rsp.data
                            this.search();

                        }
                    });
                });
            }
        },
        importDictTable() {
            this.$refs.uploadFormDiag.show({});
        },
        create() {
            this.$refs.formDiag.show({subsysId: this.page.query.param.subsysId});
        },
        edit(row) {
            this.$refs.formDiag.show({metadataId: row.metadataId});
        },
        view(row) {
            this.$refs.formDiagView.show({metadataId: row.metadataId});
        },

        toggleStatus(row) {

        },

        exportDictTable(row) {
            this.$confirm('确定导出\'' + row.metadataAlias + '\'此条记录吗?', '提示', {type: 'warning'}).then(() => {
                this.$api.platform.metadata.MetadataTableService.exportDictTable(row.metadataId)
            })
        },

        del(row) {

            let f = () => this.$api.platform.metadata.MetadataMasterService.deleteById(row.metadataId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code == 0) {
                    this.search();
                }
            })
            this.$myconfirm('确定删除\'' + row.metadataAlias + '表\'此条记录吗?', f)
        }
    },
    created() {
    },
    mounted() {
        this.$on('init', this.init);
    }
}
</script>
